<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>充电特效</title>
    <style>
        body{
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #000;
        }
        h1{
            --progress: 0.8 ;

            color: transparent;
            width: 50%;
            margin: 0 auto;
            font-size: 60px;
            font-family: Helvetica;
            letter-spacing: -3px;
            background-image: linear-gradient(#fff calc(100% - calc(var(--progress) * 100%)),greenyellow calc(100% - calc(var(--progress) * 100%)));
            background-clip: text;
            -webkit-background-clip: text;

            /*transform: scale(1.3);*/

            transform: scale(clamp(1,calc((var(--progress) - 0.99) * 200),1.3));

            transition: .3s transform ease-out;
        }

        .buttons{
            position: absolute;
            bottom: 0;
            padding: 20px;
        }

        .buttons button{
            display: inline-block;
            font-size: 32px;
            background-color: #fff;
            border: 0;
            padding: 10px 20px;
            border-radius: 12px;
            margin: 0 10px;
        }


    </style>
    <script type="text/javascript">
        let progress=0;

        function run(){
            if(progress<1){
                progress =parseFloat((progress+0.01).toFixed(2)) ;

                document.querySelector('h1').style.setProperty('--progress',progress);


                setTimeout(run, 20)
            }
        }

        function f1(){
            progress =0;
            document.querySelector('h1').style.setProperty('--progress',progress);
        }

        function f2(){
            run()
        }


/*
        document.querySelector('#empty').addEventListener('click',(e)=>{
            progress=0;
            document.querySelector('h1').style.setProperty('--progress',progress);

        })

        document.querySelector('#full').addEventListener('click',(e)=>{
            run()
        })
*/


    </script>
</head>
<body>
<div>
    <h1>
        Up to 20 hours of battery life - the longest in any Mac ever.
    </h1>
    <div class="buttons">
        <button id="empty" onclick="f1()">0%</button>
        <button id="full" onclick="f2()">100%</button>
    </div>
</div>

</body>
</html>